
<html>
<head>
    <title></title>
<link href="${STATIC_URL}css/bootstrap.min.css" rel="stylesheet">
<link href="${STATIC_URL}css/kendo.common.min.css" rel="stylesheet">
<link href="${STATIC_URL}css/kendo.default.min.css" rel="stylesheet">
<link href="${STATIC_URL}css/font-awesome.css" rel="stylesheet">
<link href="https://magicbox.bkclouds.cc/static_api/v3/bk/css/bk.css?v=1.0.1" rel="stylesheet">
<script src="${STATIC_URL}js/jquery-1.10.2.min.js"></script>
<script src="https://magicbox.bkclouds.cc/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
<script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
<script src="${STATIC_URL}js/kendo.all.min.js"></script>
<script src="${STATIC_URL}js/bk.js"></script>
<script src="${STATIC_URL}js/csrftoken.js"></script>
</head>
<body>
        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "${SITE_URL}",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                   url: crudServiceBaseUrl + "demo/",
                                   dataType: "json"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "update/",
                                    dataType: "json",
                                    method: "post"

                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                }
                            },
                            pageSize: 10,

                            schema: {
                                model: {
                                    id: "id",

                                    fields: {
                                        id:{ editable: false },
                                        multiplier: { type: "string", validation: { required: true, min: 1} },
                                        multiplicand: { type: "string" },
                                        mult_result: { type: "string", validation: { min: 0, required: false} },
                                        mult_time: { type: "string", validation: { min: 0, required: false} },
                                        mult_user: { type: "string", validation: { min: 0, required: false} }
                                    }
                                }
                            }
                        });

                    $("#grid").kendoGrid({

                        dataSource: dataSource,
                        resizable:true,
                        pageable: {
                                //pageSize: 5, //每页显示的记录数目,如果要显示分页，必须设置pageSize
                                input: true, //显示分页跳转输入框
                                refresh: true, //显示刷新",
                                info: true, //显示分页信息，如“显示条目 1 - 4 共 9”
                                previousNext: true, //隐藏“上一页”和“下一页”，
                                message: {
                                    //display: "当前是 第{0}条到第{1}条,一共 {2} 条数据记录", //自定义分页信息
                                    empty: "暂时没有数据", //配置没有数据时的提示信息
                                    first: "第一页",
                                    last: "最后一页",
                                    next: "下一页",
                                    previous: "上一页"
                                }
                            },
                        sortable: true,
                        selectable:'cell',
                        width:1400,
                        //height: 550,
                        toolbar: ["cancel","create"],
                        dataBound: function(){
                        var tbody = $("#grid tbody").html();
                        if(!tbody){
                            $($("#grid tbody").get(0)).html('<tr><td colspan="9" style="text-align: center">没有数据</td></tr>');
                        }
				        },
                        columns: [
                            { field: "id", title: "id",  width: "60px" },
                            { field: "multiplier", title: "乘数", format: "{0:c}", width: "60px" },
                            { field: "multiplicand", title: "被乘数",width: "60px" },
                            { field: "mult_result", title: "乘积", width: "60px" },
                            { field: "mult_time", title: "执行时间", width: "60px" },
                            { field: "mult_user", title: "执行人", width: "60px" },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "60px"}],
                        editable: "inline"
                    });
                });
            </script>
        </div>


</body>
</html>